<template>
  <el-dialog
    v-model="visibility"
    :title="props.rowData.id ? config.button.text.edit : config.button.text.add"
    width="60%"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      :label-width="config.form.label.width"
      status-icon>
      <el-row>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="提货日期"
            prop="pickDate">
            <el-date-picker
                v-model="formData.pickDate"
                placeholder="提货日期"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
              label="提破损吨数"
              prop="pickWornTon">
            <el-input-number
              :min="0"
              controls-position="right"
              :precision="3"
              style="width: 100%;"
              v-model="formData.pickWornTon"
              clearable
              placeholder="提破损吨数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
              label="提完整吨数"
              prop="pickIntactTon">
            <el-input-number
              :min="0"
              controls-position="right"
              :precision="3"
              style="width: 100%;"
                v-model="formData.pickIntactTon"
                clearable
                placeholder="提完整吨数"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item label="手动-预付款：" prop="manualCompanyFirstPayPrice">
            <el-input-number
                v-model="formData.manualCompanyFirstPayPrice"
                :min="0"
                controls-position="right"
                placeholder="请输入"
                style="width: 100%;"
                clearable></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiBaseCompany from "@/api/modules/base-company"
import { useValidator } from "@/hooks/useValidator";

const visibility = ref(false)
const formData = ref({})
const formRef = ref()
const { required, validate, clearValidate } = useValidator()

const formRules = {
    pickDate: [required("提货日期")],
    pickWornTon: [required("提破损吨数")],
    pickIntactTon: [required("提完整吨数")],
    manualCompanyFirstPayPrice: [required("手动-预付款")],
  }

const props = defineProps(["rowData"])

const emits = defineEmits(["save"])

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    // 新增（rowData.id 不存在）
    if (!props.rowData.id) {
      formData.value = {
        ...props.rowData,
        isEnable: true,
      };
    } else {
      //编辑
      formData.value = { ...props.rowData };
    }
    setTimeout(() => {
      clearValidate(formRef.value);
    });
  }
}, { immediate: true });

const saveEvent = async () => {
  await validate(formRef.value)
  if (formData.value.id) {
    await ApiBaseCompany.update(formData.value)
  } else {
    await ApiBaseCompany.insert(formData.value)
  }
  emits("save")
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
  .el-row {
    align-items: flex-start;
  }
  @media screen and (max-width: 700px) {
    :deep(.el-form-item__label) {
      width: 120px !important;
    }
  }
</style>
